<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .comA,
        .comB,
        .comC {
            padding: 5px;
            border: 1px solid #333;
            margin: 5px;
        }

        p {
            border: 1px solid transparent;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="changeColor">changeColor:{{color}}</button>
        <!-- <p v-color:text.rgb="color">111111</p> -->
        <p v-color:text="color">111111</p>
        <p v-color:border="color">111111</p>
        <p v-color:background="color">111111</p>
    </div>
</body>
<script>
    // 需求:将多个组件中的某一个功能单独提取出来 => 提取成公共的 => 多个组件都可以使用(代码服用)


    // 什么叫指令?
    // 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 指令的常见格式
    // v-指令名="指令值"
    // v-指令名:参数="指令值"
    // v-指令名:参数.修饰符.修饰符="指令值"

    // 全局指令
    // vue.directive(directiveName,directiveOptions)
    // directiveName  指令名称
    // directiveOptions  指令的配置(对象 -> 钩子函数(回调函数))
    //      bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    //      inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    //      update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
    //      componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    //      unbind：只调用一次，指令与元素解绑时调用。


    // el => 指令所绑定的元素，可以用来直接操作 DOM。
    // binding：一个对象，包含以下指令相关的属性 (指令名 指令值 指令参数 指令修饰符)
    //   

    /* Vue.directive("color",{
        bind:function(el,binding){
            console.log("指令所绑定的元素",el);
            console.log("指令相关的属性",binding);
            var {arg = 'text',value} = binding;

            switch(arg){
                case "text":
                    el.style.color = value;
                break;
                case "border":
                    el.style.borderColor = value;
                break;
                case "background":
                    el.style.backgroundColor = value;
                break;
            }
           

        },
        update:function(el,binding){
            console.log("指令值改变了:指令所绑定的元素",el);
            console.log("指令值改变了:指令相关的属性",binding);
            var {arg = 'text',value} = binding;

            switch(arg){
                case "text":
                    el.style.color = value;
                break;
                case "border":
                    el.style.borderColor = value;
                break;
                case "background":
                    el.style.backgroundColor = value;
                break;
            }
           

        },
    }) */

    // 如果指令的第二参数是一个函数 => 那么指令将在bind和update时触发 =>  a. 指令第一次绑定到元素时调用  b.指令所在的组件vDom更新时在执行一次

    Vue.directive("color", function (el, binding) {
        console.log("指令所绑定的元素", el);
        console.log("指令相关的属性", binding);
        var { arg = 'text', value } = binding;

        switch (arg) {
            case "text":
                el.style.color = value;
                break;
            case "border":
                el.style.borderColor = value;
                break;
            case "background":
                el.style.backgroundColor = value;
                break;
        }
    })






    var vm = new Vue({
        el: "#app",
        data: {
            color: "red",
        },
        methods: {
            changeColor() {
                this.color = "blue";
            }
        }

    })



</script>

</html>